import React, { useEffect, useRef } from 'react';
import ThemeHeader from '@/components/theme-header-rcm';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getNewAlbumAction } from '../../store/actionCreators';
import { AlbumWrapper } from './style';
import { Carousel } from 'antd';
import { NEW_ALBUM_RECOMMEND_LIMIT } from '@/common/contants';
import AlbumCover from '@/components/album-cover';
const NewAlbum = (props) => {
    // state

    // Hooks
    const dispatch = useDispatch()
    const pageRef = useRef()
    const {newAlbums=[]} = useSelector(state=>{
        return {
            newAlbums:state.getIn(["recommend","newAlbums"])
        }
    },shallowEqual)
    useEffect(()=>{
        dispatch(getNewAlbumAction(NEW_ALBUM_RECOMMEND_LIMIT))
    },[dispatch])
    return (
        <AlbumWrapper>
            <ThemeHeader title="新碟上架" ></ThemeHeader>
            <div className="content">
                <button className="arrow arrow-left sprite_02" onClick={e=>pageRef.current.prev()}></button>
                <div className="album">
                    <Carousel dots={false} ref={pageRef}>
                        {
                            [0,1].map(item=>{
                                return (
                                    <div key={item} className="page">
                                       {
                                          newAlbums.slice(item*5,(item+1)*5).map(datas=>{
                                              return (
                                                  <AlbumCover key={datas.id} info={datas} size={100} width={118} bgp={"-570px"}>
                                                      {datas.name}
                                                  </AlbumCover>
                                              )
                                          }) 
                                       }
                                    </div>
                                )
                            })
                        }
                    </Carousel>
                </div>
                <button className="arrow arrow-right sprite_02" onClick={e=>pageRef.current.next()}></button>
            </div>
        </AlbumWrapper>
    );
};

export default NewAlbum;